<template>
  <div id="app" :class="is_prod_env()?'app_c':'appdev_c'">
    <!-- <img src="./assets/logo.png"> -->
    <transition :name="transitionName">
      <router-view/>
    </transition>
    <div class="mask"  id="showMaskAlarm" style="display: none"></div><!-- v-show="showMask" -->
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
     return {
       transitionName:'routerTransition',
       showMask: false,
     }
   },
   watch: {//使用watch 监听$router的变化
    $route(to, from) {
      this.transitionName = 'breadcrumb';
     //如果to索引大于from索引,判断为前进状态,反之则为后退状态
     // if(to.meta.index > from.meta.index){
     // //设置动画名称
     //  // this.transitionName = 'slide-left';
     //  this.transitionName = 'breadcrumb';
     // }else{
     //  this.transitionName = 'breadcrumb';
     // }
    }
   },
   methods:{
      is_prod_env() {
        // console.log("process.env.NODE_ENV", process.env.NODE_ENV);
        if (process.env.NODE_ENV === 'production') {
          return 1;
        } else {
          return 0;
        }
      }
   },
   mounted(){
    // console.log('打印qtCall', this.$qtCall)
    // this.$qtCall.QtToJs.connect((func, json) => {

    // })
   }
}
</script>

<style>
  #app {
    /* font-family: 'Avenir', Helvetica, Arial, sans-serif; */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* text-align: center;
    color: #2c3e50;
    margin-top: 60px; */
    /* user-select:none; */
    /* background:#000; */
    height: 100%;
  }

  .app_c {
    /* background:#000; */
  }

  .appdev_c {
    background:#fff;
  }

  .slide-right-enter-active,
  .slide-right-leave-active,
  .slide-left-enter-active,
  .slide-left-leave-active {
   will-change: transform;
   transition: all 500ms;
   position: absolute;
  }
  .slide-right-enter {
   opacity: 0;
   transform: translate3d(-100%, 0, 0);
  }
  .slide-right-leave-active {
   opacity: 0;
   transform: translate3d(100%, 0, 0);
  }
  .slide-left-enter {
   opacity: 0;
   transform: translate3d(100%, 0, 0);
  }
  .slide-left-leave-active {
   opacity: 0;
   transform: translate3d(-100%, 0, 0);
  }

  /* fade */
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.28s;
  }

  .fade-enter,
  .fade-leave-active {
    opacity: 0;
  }

  /* fade-transform */
  .fade-transform-leave-active,
  .fade-transform-enter-active {
    transition: all .5s;
  }

  .fade-transform-enter {
    opacity: 0;
    transform: translateX(-30px);
  }

  .fade-transform-leave-to {
    opacity: 0;
    transform: translateX(30px);
  }


  /* breadcrumb transition */
  .breadcrumb-enter-active {
    transition: all .3s;
  }

  .breadcrumb-leave-active {
    /* transition: all .3s; */
  }

  .breadcrumb-enter,
  .breadcrumb-leave-active {
    opacity: 0;

  }
/* transform: translateY(-30px); */
  .breadcrumb-move {
    transition: all .3s;
  }

  .breadcrumb-leave-active {
    /* will-change: transform; */
    position: absolute;
    /* position:fixed; */
  }

  .mask {
    border: 2px solid red;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* background-color: #ff6666;  *//* 橙色 */
  opacity: 0.8;
  transition: opacity 0.5s ease;
  animation: background-color-change 3s infinite alternate;
}
@keyframes background-color-change {
  /* 0% {
    background-color: #ff6666;
  }
  100% {
    background-color: #ffab66;
  } */
  0% {
        box-shadow: inset 0 0 60px #ff9800; /* 橙色内阴影 */
    }
    50% {
        box-shadow: inset 0 0 60px red; /* 红色内阴影 */
    }
    100% {
        box-shadow: inset 0 0 60px #ff9800; /* 橙色内阴影 */
    }
}
</style>
